<template>
  <view class="page">
    <view class="head">
      <view class="head__inn">
        <text>订单号：{{ detail.code }}</text>
        <view class="head__right">
          <text>套餐详情</text>
          <image class="head__icon" src="~@/static/my/yellowArrow.png" />
        </view>
      </view>
    </view>
    <view class="count">
      <text>支付金额</text>
      <view class="count__price">
        <text>￥</text>
        <text class="big">{{ detail.package.price }}</text>
      </view>
      <view class="count__time">
        支付剩余时间：
        <uni-countdown color="#FBBF0D" splitorColor="#FBBF0D" :show-day="false" :hour="0" :minute="10" :second="0" />
      </view>
    </view>
    <view class="info">
      <view class="info__row">
        <text>车牌号码</text>
        <text class="info__value">{{ number }}</text>
      </view>
      <view class="info__row">
        <text>会员类型</text>
        <text class="info__value primary">{{ detail.package.name }}</text>
      </view>
      <view class="info__row">
        <text>时长</text>
        <text class="info__value">{{ detail.package.note }}</text>
      </view>
      <view class="info__row">
        <text>到期时间</text>
        <text class="info__value">{{ getFeatureDate(detail.package.value) }}</text>
      </view>
    </view>
    <view class="pay">
      <view @click="payType = 'wx_pay'" class="pay__row">
        <view class="pay__left">
          <image class="pay__icon" src="~@/static/order/weixinPay.png" />
          <text>微信支付</text>
        </view>
        <image v-if="payType === 'wx_pay'" class="pay__checkbox" src="~@/static/shop/checkboxTrue.png" />
        <image v-else class="pay__checkbox" src="~@/static/shop/checkboxFalse.png" />
      </view>
      <view @click="payType = 'zfb_pay'" class="pay__row">
        <view class="pay__left">
          <image class="pay__icon" src="~@/static/order/zfbPay.png" />
          <text>支付宝支付</text>
        </view>
        <image v-if="payType === 'zfb_pay'" class="pay__checkbox" src="~@/static/shop/checkboxTrue.png" />
        <image v-else class="pay__checkbox" src="~@/static/shop/checkboxFalse.png" />
      </view>
    </view>
    <view @tap="confirmPay" class="global-btn">确认支付</view>
  </view>
</template>

<script>
import { vipPrePayAPI, vipPayAPI } from '@/api/vip';

export default {
  data() {
    return {
      from: '', // 标记从那个页面跳转而来
      number: '',
      packageId: '',
      payType: 'wx_pay', // 微信支付-wx_pay 支付宝支付-zfb_pay
      detail: {
        code: '',
        package: {}
      }
    }
  },
  onLoad(options) {
    this.from = options.from;
    this.number = decodeURIComponent(options.number);
    this.packageId = options.packageId;
    this.vipPrePay();
  },
  methods: {
    /** @name 预支付 **/
    vipPrePay() {
      vipPrePayAPI({
        number: this.number,
        packageId: this.packageId,
      }).then(res => {
        this.detail.code = res.orderCode;
        this.detail.package = res.package;
      })
    },
    /** @name 获取未来日期 **/
    getFeatureDate(day) {
      const now = new Date()
      const seconds = 60 * 60 * 24 * day * 1000;
      const timestamp = now.getTime();
      const newDate = timestamp + seconds;
      const result = new Date(newDate);
      return this.YD_dateFormat(result, 'text hh:mm:ss')
    },
    /** @name 提交支付 **/
    confirmPay() {
      vipPayAPI({
        number: this.number,
        packageId: this.packageId,
        payType: this.payType,
      }).then(res => {
        setTimeout(() => {
          uni.redirectTo({
            url: `/subpages/shop/payResult/payResult?from=vip&id=${res.id}`
          })
        }, 100)
      })
    }
  }
}
</script>

<style lang="scss">
.page {
  box-sizing: border-box;
  padding: 24rpx;
}
.head {
  width: 100%;
  height: 72rpx;
  font-size: 24rpx;
  color: #333;
  box-sizing: border-box;
  padding: 0 44rpx;
  margin-bottom: 48rpx;
}
.head__inn {
  border-bottom: 2rpx solid #EEEEEE;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head__right {
  color: #FBBF0D;
  display: flex;
  align-items: center;
}
.head__icon {
  width: 32rpx;
  height: 64rpx;
}
.count {
  color: #999;
  font-size: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.count__price {
  margin-top: 28rpx;
  display: flex;
  align-items: baseline;
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 1;
  .big {
    font-size: 72rpx;
  }
}
.count__time {
  margin-top: 36rpx;
  margin-bottom: 48rpx;
  color: #333;
  display: flex;
  align-items: center;
  .yellow {
    color: #FFB100;
  }
}
.info {
  background-color: #fff;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 12rpx 24rpx;
  margin-bottom: 24rpx;
  font-size: 26rpx;
  color: #AAA;
}
.info__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8rpx 0;
}
.info__value {
  color: #444;
}
.pay {
  background-color: #fff;
  border-radius: 14rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.pay__row {
  width: 100%;
  height: 88rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #444;
  font-size: 26rpx;
  border-bottom: 2rpx solid #EAEBEC;
  &:last-child {
    border-bottom: none;
  }
}
.pay__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.pay__checkbox {
  width: 40rpx;
  height: 40rpx;
}
</style>
